import React, { useEffect, useState, useRef } from 'react'
import { Tabs, Row, Col, Input, Slider, Select } from 'antd'
import FlowGraph from '@/pages/Graph'
import {Cell, Edge, Registry} from '@antv/x6'



const { TabPane } = Tabs
const { TextArea } = Input

interface IProps {
  id: string
}
interface EdgeAttrs {
  stroke: string
  strokeWidth: number
  connector: string
  val: string
  router: string
  fontSize: number
  color:string
}

export default function (props: IProps) {
  const { id } = props
  const [attrs, setAttrs] = useState<EdgeAttrs>({
    stroke: '#000000',
    strokeWidth: 1,
    connector: 'normal',
    val: '',
    router: 'normal',
    fontSize: 12,
    color:'rgba(0,0,0,0.85)',
  })
  const cellRef = useRef<Cell>()

  useEffect(() => {
    if (id) {
      const { graph } = FlowGraph
      const cell = graph.getCellById(id) as Edge
      if (!cell || !cell.isEdge()) {
        return
      }
      cellRef.current = cell
      let value = '';
      let length = cell.getLabels().length;
      // @ts-ignore
      if(length>0){
        // @ts-ignore
        value = cell.getLabelAt(length-1)?.attrs.label.text;
        // @ts-ignore
        setAttr('fontSize',cell.attr('text/fontSize'))
        setAttr('color',cell.attr('text/fill'))
      }
      const connector = cell.getConnector() || {
        name: 'normal',
      }
      setAttr('stroke', cell.attr('line/stroke'))
      setAttr('strokeWidth', cell.attr('line/strokeWidth'))
      setAttr('connector', connector.name)
      // @ts-ignore
      setAttr('val',value)
      // @ts-ignore
      if(cell.router.name){
        setAttr('router','manhattan')
      }else{
        setAttr('router','normal')
      }


    }
  }, [id])

  const setAttr = (key: string, val: any) => {
    setAttrs((prev) => ({
      ...prev,
      [key]: val,
    }))
  }

  const onStrokeChange = (e: React.FocusEvent<HTMLInputElement>) => {
    const val = e.target.value
    setAttr('stroke', val)
    cellRef.current!.attr('line/stroke', val)
  }

  const onStrokeWidthChange = (val: number) => {
    setAttr('strokeWidth', val)
    cellRef.current!.attr('line/strokeWidth', val)
  }

  const onConnectorChange = (val: string) => {
    setAttr('connector', val)
    const cell = cellRef.current as Edge
    cell.setConnector(val)
  }

  const onDescChange = (e: React.FocusEvent<HTMLInputElement>) => {
    const value = e.target.value;
    setAttr('val',value)
    // @ts-ignore
    if (cellRef.current.getLabels().length==0){
      // @ts-ignore
      cellRef.current.appendLabel({
        attrs: {
          text: {
            text: value,
          },
        },
      });
    }else{
      // @ts-ignore
      cellRef.current.setLabelAt(0,value);
    }
  }

  const onVerticesChange = (val:string)=>{
    if(val==="normal"){
      setAttr('router','normal')
      // @ts-ignore
      cellRef.current.router={}
    }else if(val==="manhattan"){
      setAttr('router','manhattan')
      // @ts-ignore
      cellRef.current.router={name:"manhattan"}
    }
  }

  const onFontSizeChange = (val: number) => {
    setAttr('fontSize', val)
    cellRef.current!.attr('text/fontSize', val)
  }

  const onColorChange = (e: React.FocusEvent<HTMLInputElement>) => {
    const val = e.target.value
    setAttr('color', val)
    cellRef.current!.attr('text/fill', val)
  }


  return (
    <Tabs defaultActiveKey="0">
      <TabPane tab="内容" key="0">
        <Row align="middle">
          <Col span={8}>关系描述</Col>
          <Col span={14}>
            <TextArea
              value={attrs.val}
              rows={4}
              // @ts-ignore
              onChange={onDescChange}
            />
          </Col>
        </Row>
      </TabPane>
      <TabPane tab="线条" key="1">
        <Row align="middle">
          <Col span={8}>宽度</Col>
          <Col span={12}>
            <Slider
              min={1}
              max={5}
              step={1}
              value={attrs.strokeWidth}
              onChange={onStrokeWidthChange}
            />
          </Col>
          <Col span={2}>
            <div className="result">{attrs.strokeWidth}</div>
          </Col>
        </Row>
        <Row align="middle">
          <Col span={8}>颜色</Col>
          <Col span={14}>
            <Input
              type="color"
              value={attrs.stroke}
              style={{ width: '100%' }}
              onChange={onStrokeChange}
            />
          </Col>
        </Row>
        <Row align="middle">
          <Col span={8}>连接方式</Col>
          <Col span={14}>
            <Select
              style={{ width: '100%' }}
              value={attrs.router}
              onChange={onVerticesChange}
            >
              <Select.Option value="normal">直线</Select.Option>
              <Select.Option value="manhattan">折线</Select.Option>
            </Select>
          </Col>
        </Row>
        <Row align="middle">
          <Col span={8}>拐点样式</Col>
          <Col span={14}>
            <Select
              style={{ width: '100%' }}
              value={attrs.connector}
              onChange={onConnectorChange}
            >
              <Select.Option value="normal">Normal</Select.Option>
              <Select.Option value="smooth">Smooth</Select.Option>
              <Select.Option value="rounded">Rounded</Select.Option>
              <Select.Option value="jumpover">Jumpover</Select.Option>
            </Select>
          </Col>
        </Row>
      </TabPane>
      <TabPane tab="文本" key="2">
        <Row align="middle">
          <Col span={8}>字体大小</Col>
          <Col span={12}>
            <Slider
              min={8}
              max={16}
              step={1}
              value={attrs.fontSize}
              onChange={onFontSizeChange}
            />
          </Col>
          <Col span={2}>
            <div className="result">{attrs.fontSize}</div>
          </Col>
        </Row>
        <Row align="middle">
          <Col span={8}>字体颜色</Col>
          <Col span={14}>
            <Input
              type="color"
              value={attrs.color}
              style={{ width: '100%' }}
              onChange={onColorChange}
            />
          </Col>
        </Row>
      </TabPane>
    </Tabs>
  )
}
